<template>
  <div class="cupk2-frame-tabs">
    <el-tabs v-model="editableTabsValue" type="card" class="cupk2-frame-tabs" @tab-remove="removeTab"
      @tab-click="selectTab">
      <el-tab-pane v-for="item in tabs" :key="item.name" :closable="item.isCloase" :label="item.title"
        :name="item.name"> </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { useFrameTabStore } from '@/store/useFrameTabStore';
import { useRouter } from 'vue-router';
import { useUserInfoStore } from "@/store/useUserInfoStore";
const router = useRouter();
const userInfoStore = useUserInfoStore();
const frameTabStore = useFrameTabStore();
const editableTabsValue = ref()
const tabs = computed(() => frameTabStore.$state.tabs);

watch(
  () => frameTabStore.$state.activeName,
  (newActiveName) => {
    editableTabsValue.value = newActiveName;
  },
  { immediate: true }
);

watch(
  () => userInfoStore.$state.toLogin,
  (toLogin) => {
    if (toLogin) {
      router.push('/login');
    }
  },
  { immediate: true }
);


const removeTab = (targetName: string) => {
  const tabs = frameTabStore.tabs;
  let activeName = editableTabsValue.value;
  frameTabStore.removeTab(targetName);
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1];
        if (nextTab) {
          activeName = nextTab.name;
        }
      }
    });
  }
  router.push({ name: activeName });
}


const selectTab = (tab: { paneName: string; }) => {
  frameTabStore.setActiveTab(tab.paneName);
  router.push({ name: tab.paneName });
};


router.afterEach((to) => {
  if (to.path.indexOf("system") >= 0) {
    frameTabStore.addTab({ path: to.path, title: to.meta.title as string, name: to.name as string, isCloase: true, });
    editableTabsValue.value = to.name;
  }
});

</script>
<style>
.cupk2-frame-tabs {
  padding-left: 8px;
  padding-top: 8px;
}

.cupk2-frame-tabs .el-tabs__nav-scroll {
  overflow: hidden;
}

.cupk2-frame-tabs .el-tabs {
  border: 0px;
}


.cupk2-frame-tabs .el-tabs__item {
  background-color: #ffffff;
  padding: 10px;
  padding-top: 15px;
  height: 34px;
  border-radius: 0.5em 1.5em 0em 0em;
}

.dark .cupk2-frame-tabs .el-tabs__item {
  background-color: #000000;
}

.cupk2-frame-tabs .el-tabs--card>.el-tabs__header .el-tabs__nav {
  border-radius: 0.5em 1.5em 0em 0em;
  overflow: hidden;
  border: 2px;
}

.cupk2-frame-tabs .el-tabs__header.is-top {
  margin: 0px;
  height: 34px;
}

.cupk2-frame-tabs .el-tabs__item.is-top.is-active.is-top {
  background-color: var(--el-color-primary);
  color: #ffffff;
  border: 0px;
}
</style>
